<template>
  <div class="view-content">
    <table-form
      ref="table"
      :model="searchForm"
      :columns="columns"
      :load="load"
      :menus="menus"
      is-card
      :page="true"
      :data-type="'vehicle'"
      :default-table-text="'未采集'"
      @event="tableEvent"
    >
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item :span="6" label="车牌号" prop="plateNum">
            <el-input v-model="searchForm.plateNum" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :span="6" label="开始时间" prop="startTime">
            <el-date-picker
              placeholder="开始时间"
              type="datetime"
              v-model="searchForm.startTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :span="6" label="结束时间" prop="endTime">
            <el-date-picker
              placeholder="开始时间"
              type="datetime"
              v-model="searchForm.endTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :span="6" label="数据来源" prop="dbNames">
            <el-select v-model="searchForm.dbNames">
              <el-option value="" label="全部" />
              <el-option value="jcz" label="检查站感知系统" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </table-form>
    <dialog-form v-model="dataForm.visible" title="详情">
      <el-form :model="dataForm" label-width="120px" disabled>
        <el-form-item label="车牌号" class="w50">
          <el-input v-model="dataForm.plateNum" />
        </el-form-item>
        <el-form-item label="车牌颜色" class="w50">
          <el-input v-model="dataForm.plateColor" />
        </el-form-item>
        <el-form-item label="行政区划" class="w50">
          <el-input v-model="dataForm.areaName" />
        </el-form-item>
        <el-form-item label="数据来源" class="w50">
          <el-input v-model="dataForm.dbNamestr" />
        </el-form-item>
        <el-form-item label="预警原因" class="w50">
          <el-input v-model="dataForm.source" />
        </el-form-item>
        <el-form-item label="通过时间" class="w50">
          <el-input v-model="dataForm.passTime" />
        </el-form-item>
        <el-form-item label="通行地点">
          <el-input v-model="dataForm.location" />
        </el-form-item>
      </el-form>
    </dialog-form>
  </div>
</template>
<script lang="ts" setup>
import {
  MenuProps,
  TableColumnsProps
} from '@/components/Table/types/tableForm'
import { ref } from 'vue'
import { queryEsVehicleWarning } from '@/api/retrieval'
import moment from 'moment'

// 常量
const getInitialData = () => ({
  searchForm: {
    plateNum: '',
    plateColor: '',
    startTime: moment().subtract(1, 'month').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    endTime: moment().format('YYYY-MM-DD 23:59:59'),
    dbNames: 'jcz',
    esIndexs: 'newcp'
  },
  columns: [{
    prop: 'vehicleImgUrl',
    label: '图片',
    img: true
  }, {
    prop: 'plateNum',
    label: '车牌号'
  }, {
    prop: 'plateColor',
    label: '车牌颜色',
    formatter: (row) => {
      return row.plateColor || '未采集'
    }
  }, {
    prop: 'areaName',
    label: '行政区划'
  }, {
    prop: 'dbName',
    label: '数据来源',
    formatter: (row) => {
      row.dbNamestr = dataSource[row.dbName]
      return dataSource[row.dbName]
    }
  }, {
    prop: 'source',
    label: '预警原因'
  }, {
    prop: 'passTime',
    label: '通过时间'
  }, {
    prop: 'location',
    label: '通行地点'
  }, {
    prop: ':upload_time',
    label: '数据上传时间'
  }, {
    prop: 'bdfhsj',
    label: '比对预警时间'
  }] as TableColumnsProps[],
  menus: [
    {
      name: '详情',
      event: 'detail',
      role: 'toPerson:detail',
      type: 'primary'
    }
  ] as MenuProps[],
  dataForm: {
    plateNum: '',
    plateColor: '',
    areaName: '',
    dbName: '',
    dbNamestr: '',
    source: '',
    passTime: '',
    location: '',
    visible: false
  }
})
// 表头
const columns = ref(getInitialData().columns)
// 搜索条件
const searchForm = ref(getInitialData().searchForm)
// 表单对象
const dataForm = ref(getInitialData().dataForm)
// 操作栏
const menus = ref(getInitialData().menus)
// 查询数据列表
const load = async (form: any = {}) => queryEsVehicleWarning(form)
// 操作栏事件
const tableEvent = (event: MenuProps['event'], row: any) => {
  switch (event) {
    case 'detail':
      Object.assign(dataForm.value, row)
      dataForm.value.visible = true
      break
  }
}
// 数据源翻译
const dataSource = {
  jcz: '检查站感知系统'
}
</script>
